{%extends "accounts-base.html" %}
{% load i18n %}
{% load widget_tweaks %}
{% block csslink %}
{% endblock %}
{% block title %} 修改密码 {% endblock %}
{% block css %}
<style type="text/css">
/*————————————————————修改密码框————————————————————————*/
.contentbg {
    background: #fff;
    position: fixed;
    top: 110px;
    bottom: 0;
    padding: 0 20px;

}

.accountbg {
    max-width: 500px;
    min-height: 382px;
    border-style: solid;
    border-width: 0.5px;
    border-color: #cccccc;
    /*根据父级标签水平居中*/
    margin: 0 auto;

    position: relative;
    top: 100px;
    padding: 10px 30px;

}

.accountbg h2 {
    color: #0097ab;
    /*作用于子标签全部水平居中*/
    text-align: center;
}

.form-group button {
    text-align: center;
}

.list-group {
    margin: 0 auto;
    min-height: 267px;
    max-width: 370px;
    padding: 30px 0;
}

.help-block {
    font-size: 11px;
    color: red;
    margin: 5px 0 0 0;

}

.control-label[for='id_password2'] {
    padding-right: 8px;
}

#submit button {
    margin-right: 10px;
    width: 42px;
    height: 30px;
    padding: 3px 6px;
    background-color: #00afc6;
    color: #fff;
}

#submit button :hover {
    background-color: #0093a6;
    color: #fff;
}

/*————————————————————css3实现水纹点击————————————————————————*/
.usercontrol a:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .3s, opacity .5s;
}

.usercontrol a:active:after {
    transform: scale(0, 0);
    opacity: .3;
    transition: 0s;
}
</style>
{% endblock%}
{% block content %}
<!-- content -->

    <div class="contentbg">
        <div class="accountbg">
            <h2>修改密码</h2>
            <hr>
            <div class="list-group">
                <!-- novalidate临时禁用浏览器的验证功能 -->
                <form method="POST" action="{% url 'account_change_password' %}" class="form-horizontal" novalidate='novalidate'>
                    {% csrf_token %}
                    <!-- django form对可见元素遍历表单生成-->
                    <!-- 字段的“id”属性值及字段对应的<label>标签的文字-->
                    <!-- django 插件库 widget_tweaks设置样式-->
                    <!-- 搭配js完成错误信息逐行提示-->
                    {% for field in form.visible_fields %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}" class="col-sm-4 control-label">{{field.label}}</label>
                        <div class="col-sm-8">
                            {{ field|add_class:'form-control' }}
                            <span class="help-block">{{ field.errors.0 }}</span>
                        </div>
                    </div>
                    {% endfor %}
                    <div id='submit' class="form-group">
                        <div class="col-sm-offset-4 col-sm-10">
                            <button class='btn' type='submit'>提交</button>
                            <a href="/accounts/profile/">
                                <button class='btn' type='button'>取消</button>
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

{% if messages %}
<div>
    <strong>Messages:</strong>
    {{messages.0}}
</div>
{% endif %}
{% endblock %}
{% block js %}
<script type="text/javascript">
//——————————————————————————————————————————————————————————————————————————————————
</script>
{% endblock %}